<template>
  <div class="select-table-wrap" @click.stop>
    <div v-if="$slots.selectTableSlot" class="top-wrap" @click="onHanleFous">
      <slot name="selectTableSlot"></slot>
    </div>
    <div v-if="!$slots.selectTableSlot" class="top-wrap">
      <div class="input-wrap">
        <el-input v-model="keywords" @focus="onHanleFous" />
      </div>
      <div v-if="showLabelListRef" class="text-wrap">
        <div v-for="item in labelList" :key="item.id" class="text">
          {{ item.names }}
          <span class="del-icon" @click="removeLableList(item.id)">
            <el-icon><CloseBold /></el-icon>
          </span>
        </div>
      </div>
    </div>
    <div v-if="isShowTable && columnList.length" class="table-wrap">
      <CommonTableV2 v-model="tableDataList.datalist" :table-data="tableDataList" @on-handle-db-cell-click="onHandleDBRowClick" />
    </div>
  </div>
</template>

<script>
import CommonTableV2 from "@/plugins/tableV2/CommonTableV2.vue";
import { getList } from "@/api/mains";
import { CloseBold } from "@element-plus/icons-vue";

export default defineComponent({
  name: "CommonSelectTable",
  components: { CommonTableV2, CloseBold },
  props: {
    url: {
      type: String,
      default: ""
    },
    columnList: {
      type: Array,
      default: () => []
    },
    showLabelList: {
      type: Boolean,
      default: () => true
    }
  },
  emits: { "update:model-value": null },
  setup(props, { emit }) {
    const keywords = ref("");
    const labelList = ref([]);
    const tableDataList = ref({
      maxHeight: 300,
      datalist: [],
      isShowEmptyText: true,
      columnList: props.columnList
    });

    const showLabelListRef = ref(props.showLabelList);

    const isShowTable = ref(false);

    /**
     * 点击非当前组件区域，关闭table
     */

    const bodyCloseTable = () => {
      if (isShowTable.value == true) {
        isShowTable.value = false;
      }
    };

    /**
     *移除标签
     */

    const removeLableList = id => {
      const index = labelList.value.findIndex(item => item.id === id);
      labelList.value.splice(index, 1);
      emit("update:model-value", labelList.value);
    };

    /**
     * 搜索词节流
     */
    const delay = (function () {
      let timer = 0;
      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();

    /**
     * 鼠标放上去，若搜索词不为空则展示table
     */

    const onHanleFous = () => {
      /* if (keywords.value) {
          isShowTable.value = true
        } */
      //鼠标触发直接显示
      fetchData();
    };

    watch(
      () => keywords.value,
      () => {
        delay(() => {
          fetchData();
        }, 500);
      }
    );

    /**
     * 获取数据
     */
    const fetchData = async () => {
      isShowTable.value = true;
      const res = await getList(props.url, {
        names: keywords.value
      });
      if (res.code == 200) {
        tableDataList.value.datalist = res.data.rows;
      }
    };

    /**
     * 双击table行 选中
     * @param {} row
     */
    const onHandleDBRowClick = ({ row }) => {
      console.info(row);
      labelList.value = [row];
      emit("update:model-value", labelList.value);
      isShowTable.value = false;
    };

    /**
     * 加上事件
     */
    onMounted(() => {
      document.addEventListener("click", bodyCloseTable);
    });

    /**
     * 移除事件
     */
    onUnmounted(() => {
      document.removeEventListener("click", bodyCloseTable);
    });

    return {
      keywords,
      labelList,
      isShowTable,
      tableDataList,
      onHanleFous,
      removeLableList,
      onHandleDBRowClick,
      showLabelListRef
    };
  }
});
</script>
<style scoped lang="scss">
.select-table-wrap {
  position: relative;
  z-index: 10;
  width: 100%;

  .top-wrap {
    display: flex;
    .text {
      position: relative;
      padding-right: 20px;
      margin-left: 5px;
      font-size: 12px;
      > span {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 15px;
        height: 15px;
        font-size: 12px;
        color: red;
        cursor: pointer;
        border-radius: 8px;
      }
    }
    .text-wrap {
      display: flex;
      flex-wrap: wrap;
      line-height: 32px;
    }
  }
  // .input-wrap {
  // }

  .table-wrap {
    position: absolute;
    right: 0;
    left: 0;
    padding: 5px 0;
    background-color: #fff;
    :deep() {
      .el-table__body-wrapper {
        cursor: pointer;
      }
    }
  }
}
</style>
